<template>
    <div class="le_topbar">
        <mu-icon-button v-if="isEvent" icon="chevron_left" slot="left" class="arrow" @click="goBackTo"/>
        <div v-else class="boxNo"></div>
        <div class="title" v-text="title"></div>
        <div class="operation">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        backType: {
            type: String,
            default: 'url'
        },
        title: {
            type: String,
            default: '菜单名称'
        }
    },
    data() {
        return {};
    },
    methods: {
        goBackTo(){
            this.$router.go(-1)
        }
    },
    computed: {
        isEvent() {
            return this.backType === 'event';
        }
    }
}
</script>


<style lang="less" scoped>
.le_topbar{
    position: relative; width: 100%; height: 56px; line-height: 60px; color: #fff; background: #009688;
    box-shadow: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.12); overflow: hidden;
    .arrow{
        vertical-align: top; margin-top: 5px;
    }
    .boxNo{width: 20px; display: inline-block;}
    .title {
        text-align: center; font-size: 22px; color: #fff; display: inline-block;
    }
    .operation {
        position: absolute; right: 15px; top: 0; color: #fff; font-size: 14px;
        a {
            color: #fff; text-decoration: none;
        }
    }
}
</style>